<template>
	<view class="container">
		<view class="order-info" :style="{ padding: isSettlement ? '' : '20rpx 20rpx 140rpx' }">
			<view class="info-header">
				<view style="color: #959595">
					桌台
					<text style="color: #171717; margin-left: 10rpx">
						{{ deskInfo.name }}
					</text>
				</view>
				<view>
					<u-icon
						:label="`共${dataLength}项`"
						margin-top="10"
						:name="isSelected ? 'arrow-up' : 'arrow-down'"
						size="15"
						labelPos="left"
						@click="isSelected = !isSelected"
					></u-icon>
				</view>
			</view>
			<!-- 商品详情start -->
			<view class="info-goods" v-if="isSelected">
				<view>
					<!-- 人数-->
					<view>人数：{{ deskInfo.person }}人</view>
					<!-- <view>下单时间：17:52</view> -->
				</view>
				<view>
					<!-- 分量 -->
					<u-icon name="bell" color="#edac2f" size="34"></u-icon>
					<view>{{ dataLength }}份</view>
				</view>

				<!-- <text style="display: block;margin:20rpx 0 10rpx;">快餐</text> -->
				<view class="goods" v-for="(item, index) in orderedList" :key="item.id">
					<!-- 商品start -->
					<view class="goods-image">
						<image style="height: 100%; width: 100%" :src="item.image"></image>
					</view>
					<view class="left">
						<view style="display: flex">
							<view style="flex: 1">
								<text style="color: #171717">{{ item.name }}</text>
								<text style="margin-left: 20rpx">×{{ item.quantity }}</text>
							</view>
							<view class="right" style="color: #171717">￥{{ item.allAmount }}</view>
						</view>
						<view>
							<text style="font-size: 22rpx; color: #adadad" v-if="item.itemType === 1">{{ item.specName }}</text>
							<text style="font-size: 22rpx; color: #adadad" v-else>
								{{ detailList[index].map((v) => v.foodName + '× ' + v.quantity) }}
							</text>
						</view>
					</view>
				</view>
				<!-- 商品end -->

				<!-- <text style="display: block;margin:20rpx 0 10rpx;">其他</text>
				<view class="goods">
					  商品start 
					<view class="left">
						<view class="goods-image"></view>
						<view style="display: flex;justify-content: space-between;flex-direction: column;margin-left: 10rpx;">
							<text style="color: #171717;">茶位费</text>
							<text>×8 份</text>
						</view>
					</view>
					<view class="right" style="color: #171717;">
						￥24
					</view>
				</view> -->
				<!-- 商品end -->
			</view>
			<!-- 商品详情end -->

			<view class="info-content">
				<view>
					<view>消费金额</view>
					<view>￥{{ costPrice }}</view>
				</view>

				<view>
					<view>其他优惠</view>
					<view>{{ !coupon.id ? '￥0.00' : '-￥ ' + coupon.reduceAmount }}</view>
				</view>
			</view>

			<view class="info-footer">
				<view>
					小计：
					<text style="color: #ec7f58">￥{{ allPrice }}</text>
				</view>
			</view>
		</view>

		<view class="pay-order" v-if="isSettlement">
			<!-- <view>
				<view>会员卡</view>
				<view>无</view>
			</view> -->
			<view>
				<view>优惠券</view>
				<view v-if="!coupon.id" @click="$u.route('/pages/user/coupon/coupon', { tickets: JSON.stringify(couponList) })" style="display: flex">
					{{ couponLength > 0 ? couponLength + '张' : '暂无可用' }}
					<u-icon name="arrow-right" size="18"></u-icon>
				</view>

				<view v-else @click="$u.route('/pages/user/coupon/coupon', { tickets: JSON.stringify(couponList) })" style="display: flex; color: #e86162">
					-￥{{ coupon.reduceAmount }}
					<u-icon name="arrow-right" size="18" color="#d2d2d2"></u-icon>
				</view>
			</view>

			<view>
				<view>账户余额</view>
				<view>{{ balance }}元</view>
			</view>

			<view>
				<view></view>
				<view class="" v-if="!userInfo.id">
					<u-icon label="登录会员领取更多优惠" labelPos="left" name="arrow-right" @click="$u.route('/pages/login/login')"></u-icon>
				</view>
			</view>

			<text style="display: block; margin: 20rpx 0 10rpx; font-size: 24rpx; color: #adadad">支付方式</text>
			<view class="pay-method" v-for="(item, index) in systemInfo.hostName === 'alipay' ? payMethodsAlipay : payMethods" :key="item.value">
				<u-icon :label="item.label" :name="item.name" :color="item.color" size="22"></u-icon>
				<u-icon v-if="item.isShow" :name="item.isPayMethod ? item.selected : item.unSelected" color="#a78851" size="22" @click="onCheckPay(index)"></u-icon>
				<view v-else style="display: flex; align-items: center" @click="onVoucher">
					余额不足，请充值
					<image class="width-30 height-30 shrink0" src="../../../static/images/my/icon_arrow.png" @click="onRemark"></image>
				</view>
			</view>

			<view style="margin-top: 20rpx; padding: 0 20rpx; height: 100rpx; border: 1px solid #f5f5f5; border-radius: 10rpx">
				<view class="w-100 flex justify-between align-center">
					<text class="fsize-28">备注</text>
					<view class="flex align-center">
						<text class="fsize-24 mr-10" v-if="!remark">--</text>
						<text class="fsize-24 mr-10" v-else-if="remark && remark.length < 5">{{ remark }}</text>
						<text class="fsize-24 mr-10" v-else>{{ remark.substring(0, 5) }}...</text>
						<image class="width-30 height-30 shrink0" src="../../../static/images/my/icon_arrow.png" @click="onRemark"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view>
				<button :class="{ isSettlement: !isSettlement }" :type="isSettlement ? '' : 'primary'" @click="goBackGoods">继续加菜</button>
			</view>
			<!-- 点击下单，跳转到订单详情界面 order/detail-->
			<view v-if="isSettlement">
				<button style="border-radius: 0 45rpx 45rpx 0" disabled v-if="!payment_code">选择支付方式</button>
				<button class="button" @click="createOrder" v-else>支付</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { pay } from '@/common/util.js';
import common from '@/common/util.js';
export default {
	data() {
		return {
			systemInfo: common.getSystemInfo(),
			isTemp: false, // 购物车详情立即购买
			deskId: 0,
			orderId: 0,
			payMethods: [
				{
					label: '微信支付',
					value: 'wechatpay',
					name: 'weixin-fill',
					selected: 'checkmark-circle-fill',
					unSelected: 'checkmark-circle',
					color: '#51b133',
					isPayMethod: true,
					isShow: true
				},
				{
					label: '余额支付',
					value: 'balancepay',
					name: 'rmb',
					selected: 'checkmark-circle-fill',
					unSelected: 'checkmark-circle',
					color: '#51b133',
					isPayMethod: false,
					isShow: false
				}
				// {label:'支付宝支付',value:'alipay',name:'zhifubao',selected:'checkmark-circle-fill',unSelected:'checkmark-circle',color:'#409eff',isPayMethod:false},
			],
			payMethodsAlipay: [
				// {
				// 	label: '微信支付',
				// 	value: 'wechatpay',
				// 	name: 'weixin-fill',
				// 	selected: 'checkmark-circle-fill',
				// 	unSelected: 'checkmark-circle',
				// 	color: '#51b133',
				// 	isPayMethod: true,
				// 	isShow: true
				// },
				{
					label: '支付宝支付',
					value: 'alipay',
					name: 'zhifubao',
					selected: 'checkmark-circle-fill',
					unSelected: 'checkmark-circle',
					color: '#409eff',
					isPayMethod: true,
					isShow: true
				},
				{
					label: '余额支付',
					value: 'balancepay',
					name: 'rmb',
					selected: 'checkmark-circle-fill',
					unSelected: 'checkmark-circle',
					color: '#51b133',
					isPayMethod: false,
					isShow: false
				}
				// {label:'支付宝支付',value:'alipay',name:'zhifubao',selected:'checkmark-circle-fill',unSelected:'checkmark-circle',color:'#409eff',isPayMethod:false},
			],

			payment_code: common.getSystemInfo().hostName === 'WeChat' ? 'wechatpay' : 'alipay',
			balance: 0, // 余额
			isSelected: true,
			orderedList: [],
			deskInfo: {},
			couponList: [], // 优惠券列表
			coupon: {
				// 选中优惠券
				id: 0,
				reduceAmount: 0
			}
			// reduceAmount:0, // 优惠多少钱
		};
	},
	onReady() {
		// #ifdef MP-ALIPAY
		uni.hideHomeButton();
		uni.setNavigationBarColor({
			frontColor: '#000000', // 设置文本颜色
			backgroundColor: '#ffffff' // 设置背景颜色
		});
		// #endif
	},
	watch: {
		balance: {
			handler(val) {
				if (val < this.allPrice) {
					// 判断余额是否大于商品价格
					// #ifdef MP-ALIPAY
					this.payMethodsAlipay[1].isShow = false;
					// #endif
					// #ifdef MP-WEIXIN
					this.payMethods[1].isShow = false;
					// #endif
				} else {
					// #ifdef MP-ALIPAY
					this.payMethodsAlipay[1].isShow = true;
					// #endif
					// #ifdef MP-WEIXIN
					this.payMethods[1].isShow = true;
					// #endif
				}
			}
		}
	},
	computed: {
		...mapState(['stock', 'person', 'remark', 'userInfo']),
		...mapState('quantity', ['isSettlement']),
		costPrice() {
			// 原价
			return this.orderedList.reduce((a, b) => a + b.allAmount, 0).toFixed(2);
		},
		allPrice() {
			// 折后价
			const price = (this.orderedList.reduce((a, b) => a + b.allAmount, 0) - this.coupon.reduceAmount).toFixed(2);
			if (this.balance < price) {
				// 判断余额是否大于商品价格
				// #ifdef MP-WEIXIN
				this.payMethods[1].isShow = false;
				// #endif
				// #ifdef MP-ALIPAY
				this.payMethodsAlipay[1].isShow = false;
				// #endif
			} else {
				// #ifdef MP-WEIXIN
				this.payMethods[1].isShow = true;
				// #endif
				// #ifdef MP-ALIPAY
				this.payMethodsAlipay[1].isShow = true;
				// #endif
			}
			return price;
		},
		dataLength() {
			return this.orderedList.reduce((a, b) => a + b.quantity, 0);
		},
		couponLength() {
			return this.couponList.length;
		},
		// 计算套菜的规格
		detailList() {
			const list = this.orderedList.map((row) => {
				if (!row.detailList) return [];
				return row.detailList.map((v) => {
					return {
						foodName: v.name,
						quantity: v.quantity
					};
				});
			});
			return list || [];
		}
		// realPrice() {
		// 	return this.orderedList.reduce((a,b)=>a + b.realAmount,0).toFixed(2)
		// }
	},
	onLoad({ isTemp }) {
		if (isTemp) {
			this.isTemp = isTemp;
		}
		this.deskId = uni.getStorageSync('deskId') || 0;
		this.orderId = uni.getStorageSync('orderId') || 0;
		// this.onGetOrderedList()
	},
	onShow() {
		this.deskId = uni.getStorageSync('deskId') || 0;
		this.orderId = uni.getStorageSync('orderId') || 0;
		this.onGetOrderedList();

		// 获取优惠券的数据
		uni.$on('isRefresh', (data) => {
			// console.log(data);
			this.coupon = data;
		});
	},
	methods: {
		// 获取已下单列表
		async onGetOrderedList() {
			const res = await this.$api.getOrderedList({
				orderId: this.orderId,
				deskId: this.deskId,
				isTemp: !!this.isTemp
			});
			// console.log(res)
			this.orderedList = res.data.detail;
			this.deskInfo = res.data.desk;
			this.couponList = res.data.couponList || [];
			this.balance = res.data.balance;
		},
		// 选中支付方式
		onCheckPay(index) {
			// #ifdef MP-WEIXIN
			this.payMethods.forEach((e) => {
				e.isPayMethod = false;
			});
			this.payMethods[index].isPayMethod = !this.payMethods[index].isPayMethod;
			this.payment_code = this.payMethods[this.payMethods.findIndex((e) => e.isPayMethod)].value;
			// #endif
			// #ifdef MP-ALIPAY
			this.payMethodsAlipay.forEach((e) => {
				e.isPayMethod = false;
			});
			this.payMethodsAlipay[index].isPayMethod = !this.payMethodsAlipay[index].isPayMethod;
			this.payment_code = this.payMethodsAlipay[this.payMethodsAlipay.findIndex((e) => e.isPayMethod)].value;
			// #endif
		},
		// 跳转加菜
		goBackGoods() {
			uni.switchTab({
				url: '/pages/tab_bar/classify/classify'
			});
		},
		// 支付订单
		async createOrder() {
			/* 
					1.点击打开支付，发起请求没成功提示用户
					2.成功以后支付成功删除桌台Id和订单Id跳转到支付成功界面
					3.成功界面一个点击按钮，按钮可以返回首页
				 */
			const res = await this.$api.payDeskOrder({
				orderId: this.orderId,
				deskId: this.deskId,
				reduceAmount: this.coupon.reduceAmount || 0,
				FCouponID: this.coupon.id || 0,
				remark: this.remark
			});
			// console.log(res);
			pay(res.data.orderId, this.payment_code, null, { amount: this.allPrice });

			// if(this.payment_code === '微信支付') {
			// 		const res = this.$api.OrderPay({ids: uni.getStorageSync('orderId'), payment_code: 'wechatpay', payment_type:17,params:{}})
			// 		console.log(res);
			// 		// const params = respay.data.respData
			// 		uni.requestPayment({
			// 			success:(res)=>{
			// 				console.log(res);
			// 			},
			// 			fail:(err)=>{
			// 				console.log(err);
			// 			}
			// 		})
			// }
		},
		// 跳转到备注
		onRemark() {
			uni.navigateTo({
				url: '/pages/pay/remark'
			});
		},
		onVoucher() {
			if (this.userInfo.id) {
				uni.navigateTo({
					url: '/pages/user/recharge/recharge'
				});
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	height: 100vh;

	& > view {
		background-color: #fff;
		width: 94%;
		margin: 0 auto;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	// 订单信息
	.order-info {
		.info-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			border-bottom: 2rpx solid #eeeeee;
		}

		// 选中菜品
		.info-goods {
			padding: 20rpx 0;
			border-bottom: 2rpx solid #eeeeee;
			color: #b4b4b4;

			& > view {
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				flex-wrap: wrap;
			}

			.goods {
				display: flex;
				align-items: flex-start;
				.goods-image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
				.left {
					padding: 0 20rpx;
					flex: 1;
				}
			}
		}

		.info-content {
			padding: 20rpx 0;
			border-bottom: 2rpx solid #eeeeee;

			& > view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 50rpx;
				color: #171717;
			}
		}

		.info-footer {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			height: 100rpx;
			font-size: 34rpx;
			color: #171717;
		}
	}

	// 支付信息
	.pay-order {
		margin-top: 20rpx;
		padding-bottom: 200rpx;

		& > view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			font-size: 30rpx;
		}

		.pay-method {
			padding: 0 20rpx;
			height: 100rpx;
			border-bottom: 2rpx solid #f5f5f5;
			border-radius: 10rpx;
		}
	}

	// 底部按钮
	.footer {
		background-color: #ffffff;
		z-index: 10;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 30rpx 60rpx 30rpx;

		button {
			text-align: center;
			padding: 0;
			line-height: 90rpx;
			color: #111111;
			font-size: 30rpx;
			width: 280rpx;
			height: 90rpx;
			font-weight: bold;
			margin: 0;
			border-radius: 45rpx 0 0 45rpx;
		}
		.isSettlement {
			border-radius: 45rpx;
		}

		.button {
			background: linear-gradient(34deg, #f3c45d, #edac2f);
			border-radius: 0 45rpx 45rpx 0;
		}
	}
}
</style>
